.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .flexItem {
    padding: 4px 8px;
    border: 1px solid transparent;
    color: rgb(66 66 66);
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-block;
    background: rgb(243 244 246);
    cursor: pointer;

    &.selected {
      border: 1px dashed #fc6767;
    }
  }
}

.addCertificate {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;

  .selectItem{
    display: flex;
    align-items: center;
  }

  .input {
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    width: 150px;
    flex: 0 1 120px;
    background-color: #f3f4f6;
    border: 1px solid #f3f4f6;
    border-radius: 3px;
    font-size: 13px;
    color: #222;
    margin-right: 10px;
    outline: none;
    appearance: none;
  }

  .btn {
    display: inline-block;
    border-radius: 18px;
    padding: 5px 8px;
    font-size: 13px;
    color: #fff;

    // background: #13d8a7;
    background-image: linear-gradient(to right, #ec008c, #fc6767);
    cursor: pointer;

    &.forbid {
      background: #ccc;
    }
  }
}

.selectedItemWraper{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .selectedItem{
    color: rgb(66 66 66);
    font-size: 13px;
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 10px;

    .name{
      padding: 4px 8px;
      border: 1px solid transparent;
      color: rgb(66 66 66);
      font-size: 13px;
      border-radius: 6px;
  
      // margin: 5px 0;
      white-space: nowrap;
      display: inline-block;
      background: rgb(243 244 246);
    }
  }

  .removeBtn{
    padding: 10px;
    background-color: rgb(243 244 246);
    border-radius: 4px;
  }

  .remove {
    // background: red;
    color: #fc6767;
    width: 16px;
    height: 16px;
  
    // border-radius: 50%;
    display: inline-block;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
